<template>
  <div class="page clockInRecords-page" data-page="clockInRecords" style="z-index: 2;">
    <div class="link-page-nav">
        <a href="#" class="link" @click="$root.backToTab()">
            <i class="iconfont icon-zuo"></i>
        </a>
    </div>
    <div class="link-page-top" style="padding-bottom: 17px;">
        <div class="link-page-title">打卡记录</div>
    </div>
    <div class="page-content" style="padding-bottom: 150px;">
        <div class="clockInRecords-page-top">
            <div class="clockInRecords-calendar-container" id="clockInRecords-calendar-container_{{getNewId}}"></div>
        </div>
        <div>
            <div class="inspection-time-title">记录明细</div>
        </div>
        <div id="recordDayList_{{getNewId}}">
            <div class="record-r con">
                <!-- <div style="width: 120px;height: 120px;float: left;"> -->
                	<div class="ondutyTime2" id="ondutyBtn_{{getNewId}}">
    	            	<span id="ondutyTimeTitle_{{getNewId}}" class="clockBtnTip"></span>	
    	            	<p id="ondutyTime_{{getNewId}}"></p>
                	</div>
                	
                <!-- </div> -->
                <!-- <div style="width: 120px;height: 120px;float: right;"> -->
                	<div class="offdutyTime2" id="offdutyBtn_{{getNewId}}">
                		<span id="offdutyTimeTitle_{{getNewId}}" class="clockBtnTip"></span>	
    	            	<p id="offdutyTime_{{getNewId}}"></p>
                	</div>
                <!-- </div> -->
            </div>
            <div style="margin-top: 20px;text-align: center;" class="con">
                <div class="duty-time-title" style="color:#2471CA;">一  值班时间  一</div>
    			<span id="watchDutyTime_{{getNewId}}"></span>
            </div>
        </div>
    </div>   
  </div>
</template>
<style>
    .record-r{
        width: 100%;
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .icon-today {
        position: absolute;
        top: 20px;
    }
    .clockInRecords-calendar-container .calendar-day.calendar-day-today span {
        background: rgba(225, 225, 225, 1);
        opacity: 0.5;
        border-radius: 50%;
        color: #000;
    }
    .clockInRecords-calendar-container .calendar-day.calendar-day-today .icon-today {
        color: #000;
    }
    .clockInRecords-calendar-container .calendar-day.calendar-day-selected .icon-today {
        color: #fff;
    }
    .clockInRecords-calendar-container .calendar-day.calendar-day-selected span{
        background: #2196f3;
        color: #fff;
        opacity: 1;
    }
</style> 
<script>
    return {
        data: function () {
            return {
            	pageIndex: 0,//当前页数
                pageSize: 25,//一页包含数量
                startTime:moment().format("YYYY-MM-DD 00:00:00"),
                endTime:moment().format("YYYY-MM-DD 23:59:59"),
                searTime:"",
                searStartTime:"",
                searEndTime:"",
                clockInRecordList: {},//当月的打卡记录集合
                dayKey:moment().format("YYYYMMDD"),
                getNewId: (new Date()).getTime(),
            }
        },
        methods: {
            createCalendar:function(){
                var self = this;
                var monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月' , '9月' , '10月', '11月', '12月'];
                var month = ['01', '02', '03', '04', '05', '06', '07', '08' , '09' , '10', '11', '12'];
                var calendarInline = app.calendar.create({
                    containerEl: '#clockInRecords-calendar-container_'+self.getNewId,
                    value: [new Date()],
                    weekHeader: false,
                    renderToolbar: function () {
                        return '<div class="toolbar calendar-custom-toolbar no-shadow">' +
                        '<div class="toolbar-inner">' +
                            '<div class="left">' +
                            '<a href="#" class="link icon-only"><i class="icon icon-back ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
                            '</div>' +
                            '<div class="center"></div>' +
                            '<div class="right">' +
                            '<a href="#" class="link icon-only"><i class="icon icon-forward ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
                            '</div>' +
                        '</div>' +
                        '</div>';
                    },
                    on: {
                        init: function (c) {
                        	//  $(".calendar-day-today").append(`<div class="icon-today">
                            //  <i class="iconfont icon-jintian-"></i></div>`);
                        	//前一个月
                        	self.searStartTime = moment(new Date()).subtract(1,'months').format('YYYY-MM')+ "-01 00:00:00";
                        	//后一个月
                        	self.searEndTime = moment(new Date()).add(1,'months').endOf('months').format("YYYY-MM-DD")+" 23:59:59"; 
                           
                        	self.searTime = c.currentYear + "-" +month[c.currentMonth] + "-01";
                            $('#clockInRecords-calendar-container_'+self.getNewId +' .calendar-custom-toolbar .center').text(c.currentYear + '年' + monthNames[c.currentMonth]);
                            $('#clockInRecords-calendar-container_'+self.getNewId +' .calendar-custom-toolbar .left .link').on('click', function () {
                                calendarInline.prevMonth();
                            });
                            $('#clockInRecords-calendar-container_'+self.getNewId +' .calendar-custom-toolbar .right .link').on('click', function () {
                                calendarInline.nextMonth();
                            });
                        },
                        monthYearChangeStart: function (c) {
                            $('#clockInRecords-calendar-container_'+self.getNewId +' .calendar-custom-toolbar .center').text(c.currentYear + '年' + monthNames[c.currentMonth]);
                            self.searTime = c.currentYear + "-" + month[c.currentMonth] + "-01";
                        	self.searStartTime = moment(new Date(self.searTime)).format('YYYY-MM')+ "-01 00:00:00";
                        	self.searEndTime = moment(new Date()).add(1,'months').endOf('months').format("YYYY-MM-DD")+" 23:59:59"; 
                        	
                            self.getUserClockRecords();
                        },
                        calendarDayClick:function (c,value) {//日历点击监听事件
                            var y = c.currentYear;
                            var m = c.params.monthNames[c.currentMonth];
                            var day = $(value).attr("data-day");
                            self.startTime = y + "-" + m +"-" + day + " 00:00:00";
                            self.endTime = y + "-" + m +"-" + day + " 23:59:59";
                            if(day<10){
                            	day = "0"+day;
                            }
                            self.dayKey = y + m +day;
                            self.getSelectRecord();
                        }
                    }
                });
            },
         	//获取当前用户月打卡记录
            getUserClockRecords: function () {
                var self = this;
                var html = "";
                $("#recordDayList_"+self.getNewId+" .no-data-img").remove();
                Dao.getUserClockRecords({
                    userName: userInfor.accountName,
                    //dateTime: self.searTime,
                    startTime: self.searStartTime,
                    endTime: self.searEndTime,
                }, function (data) {
                    if (data&&data.length > 0){
                        $("#recordDayList_"+self.getNewId+" .con").show();
                    	self.clockInRecordList = {};
                        for (var i = 0; i < data.length; i++) {
							//打卡日期 watchDate 作为key,对象最为value
							var watchDate = data[i].watchDate;
                        	self.clockInRecordList[watchDate] = data[i];
							
                        	var offdutyResult = data[i].offdutyResult;//下班打卡结果 0:未打卡 1:打卡 2:迟到 3:早退
                           	var ondutyResult = data[i].ondutyResult;// 上班打卡结果  0:未打卡 1:打卡 2:迟到 3:早退
                           	//日历中的小圆点
                           	var attrValue = watchDate.toString().substring(0,4)+"-"+ (parseInt(watchDate.toString().substring(4,6))-1)+"-"+ watchDate.toString().substring(6,8).replace(/^[0]+/,"");
							//打卡正常（上下班打卡 都正常）
                           	if(data[i].result==1){
								$("#clockInRecords-calendar-container_"+self.getNewId).find(".calendar-row div[data-date='"+attrValue+"'] span").addClass("calendarDay normalColor");
							}else if(data[i].result==0){
								$("#clockInRecords-calendar-container_"+self.getNewId).find(".calendar-row div[data-date='"+attrValue+"'] span").addClass("calendarDay abnormalColor");
							}
						}
                    }else{
                        $("#recordDayList_"+self.getNewId+" .con").hide();
                        $("#recordDayList_"+self.getNewId).append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                    } 
                  	//默认显示今天的打卡记录
                	self.getSelectRecord();
                });
            },
          	//获取日历中选择的打卡记录
            getSelectRecord: function () {
            	var self = this;
            	var data = self.clockInRecordList[self.dayKey];
            	if(data && data.result!=3){
            		$("#recordDayList_"+self.getNewId+" .no-data-img").remove();
            		$("#recordDayList_"+self.getNewId+" .con").show();
                	//值班时间
            		if(data.watchStartTime!=null && data.watchEndTime!=null){
            		  	$("#watchDutyTime_"+self.getNewId).html(data.watchStartTime+"~"+data.watchEndTime);
            		}

            		var offdutyResult = data.offdutyResult;//下班打卡结果 0:未打卡 1:打卡 2:迟到 3:早退
                   	var ondutyResult = data.ondutyResult;// 上班打卡结果  0:未打卡 1:打卡 2:迟到 3:早退
                   	var ondutyTime = data.ondutyTime!=null?data.ondutyTime.split(" ")[1]:"";//上班打卡时间
                   	var offdutyTime = data.offdutyTime!=null?data.offdutyTime.split(" ")[1]:"";//下班打卡时间

                    //上班
            		if(ondutyResult==0){
            			$("#ondutyBtn_"+self.getNewId).attr('class','').addClass("ondutyTime2");
            			$("#ondutyTimeTitle_"+self.getNewId).html("上班未打卡");
                    }else if(ondutyResult==1){
                    	$("#ondutyBtn_"+self.getNewId).attr('class','').addClass("ondutyTime");
                    	$("#ondutyTimeTitle_"+self.getNewId).html("上班正常");
                    }else if(ondutyResult==2){
                    	$("#ondutyBtn_"+self.getNewId).attr('class','').addClass("ondutyTime1");
                    	$("#ondutyTimeTitle_"+self.getNewId).html("上班迟到");
                    }

                    //下班
            		if(offdutyResult==0){
            			$("#offdutyTimeTitle_"+self.getNewId).html("下班未打卡");
            			if(data.result==1){
            				$("#offdutyBtn_"+self.getNewId).attr('class','').addClass("offdutyTime");
            			}else{
            				$("#offdutyBtn_"+self.getNewId).attr('class','').addClass("offdutyTime2");
            			}
                    }else if(offdutyResult==1){
                    	$("#offdutyBtn_"+self.getNewId).attr('class','').addClass("offdutyTime");
                    	$("#offdutyTimeTitle_"+self.getNewId).html("下班正常");
                    }else if(offdutyResult==3){
                    	$("#offdutyBtn_"+self.getNewId).attr('class','').addClass("offdutyTime1");
                    	$("#offdutyTimeTitle_"+self.getNewId).html("下班早退");
                    }
            		$("#ondutyTime_"+self.getNewId).html(ondutyTime);
            		$("#offdutyTime_"+self.getNewId).html(offdutyTime);
                }else{
                    //当天没有打卡记录
                	//$("#ondutyBtn").attr('class','').addClass("ondutyTime2");
        			//$("#ondutyTimeTitle").html("上班未打卡");
        			//$("#offdutyBtn").attr('class','').addClass("offdutyTime2");
        			//$("#offdutyTimeTitle").html("下班未打卡");
        			//$("#ondutyTime").html("");
            		//$("#offdutyTime").html("");
            		//$("#watchDutyTime").html("");
            		$("#recordDayList_"+self.getNewId+" .no-data-img").remove();
            		$("#recordDayList_"+self.getNewId).append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
            		$("#recordDayList_"+self.getNewId+" .con").hide();
                }
            	
            },
        },
        on:{
            pageInit: function(e, page) {
                var self = this;
                self.createCalendar();
                self.getUserClockRecords();
            }
        }
    }
</script>